<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" style="width: 100%;" @tab-click="handleClick">
      <el-tab-pane label="企业信息" name="企业信息">
        <div class="filter-container">
          <div class="filter-item">
            <el-form label-width="100px">
              <el-form-item label="企业简称:"><el-input v-model="listQuery1.name" placeholder="请输入企业简称" class="filter-item" clearable style="width: 200px;" />
              </el-form-item>
            </el-form>
          </div>
          <div class="filter-item">
            <el-button v-waves :loading="listLoading1" class="filter-item" type="primary" size="small" icon="el-icon-search" @click="handleSearch1">查询</el-button>
          </div>
          <div class="filter-item">
            <el-button v-waves :loading="downloadLoading1" class="filter-item" type="primary" size="small" icon="el-icon-download" @click="handleDownload1">导出</el-button>
          </div>
        </div>
        <el-table v-loading="listLoading1" :data="list1" size="mini" fit highlight-current-row style="width: 100%;" max-height="500">
          <el-table-column label="企业名称" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.yhmc }}</span>
            </template>
          </el-table-column>
          <el-table-column label="企业简称" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.yhjc }}</span>
            </template>
          </el-table-column>
          <el-table-column label="法人代表" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.frdb }}</span>
            </template>
          </el-table-column>
          <el-table-column label="联系电话" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.lxdh }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-class">
          <pagination v-show="total1 > 0" :total="total1" :page.sync="listQuery1.pageNum" :limit.sync="listQuery1.pageSize" @pagination="getList1" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="线路信息" name="线路信息">
        <div class="filter-container">
          <div class="filter-item">
            <el-form label-width="100px">
              <el-form-item label="所属企业："><yhxx v-if="yhxxFormVisible2" ref="yhxxForm2" @change="change2(arguments)" /></el-form-item>
            </el-form>
          </div>
          <div class="filter-item">
            <el-form label-width="100px">
              <el-form-item label="线路名称："><el-input v-model="listQuery2.name" placeholder="请输入线路名称" class="filter-item" clearable style="width: 200px;" /></el-form-item>
            </el-form>
          </div>
          <div class="filter-item">
            <el-button v-waves :loading="listLoading2" class="filter-item" type="primary" size="small" icon="el-icon-search" @click="handleSearch2">查询</el-button>
          </div>
          <div class="filter-item">
            <el-button v-waves :loading="downloadLoading2" class="filter-item" type="primary" size="small" icon="el-icon-download" @click="handleDownload2">导出</el-button>
          </div>
        </div>
        <el-table v-loading="listLoading2" :data="list2" size="mini" fit highlight-current-row style="width: 100%;" max-height="500">
          <el-table-column label="线路名称" align="center" width="150" fixed>
            <template slot-scope="{ row }">
              <span>{{ row.xlmc }}</span>
            </template>
          </el-table-column>
          <el-table-column label="所属企业" align="center" width="100">
            <template slot-scope="{ row }">
              <span>{{ row.yhjc }}</span>
            </template>
          </el-table-column>
          <el-table-column label="管理机构" align="center" width="70">
            <template slot-scope="{ row }">
              <span>{{ row.qsmc }}</span>
            </template>
          </el-table-column>
          <el-table-column label="线路编码" align="center" width="70">
            <template slot-scope="{ row }">
              <span>{{ row.xlbm }}</span>
            </template>
          </el-table-column>
          <el-table-column label="营运时间" align="center" width="70">
            <template slot-scope="{ row }">
              <span>{{ row.yysj }}</span>
            </template>
          </el-table-column>
          <el-table-column label="调度方式" align="center" width="80">
            <template slot-scope="{ row }">
              <span>{{ row.ddfs }}</span>
            </template>
          </el-table-column>
          <el-table-column label="首站" align="center">
            <el-table-column label="名称" align="center" width="150">
              <template slot-scope="{ row }">
                <span>{{ row.szmc }}</span>
              </template>
            </el-table-column>
            <el-table-column label="首班" align="center" width="60">
              <template slot-scope="{ row }">
                <span>{{ row.szsb }}</span>
              </template>
            </el-table-column>
            <el-table-column label="末班" align="center" width="60">
              <template slot-scope="{ row }">
                <span>{{ row.szmb }}</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="末站" align="center">
            <el-table-column label="名称" align="center" width="150">
              <template slot-scope="{ row }">
                <span>{{ row.mzmc }}</span>
              </template>
            </el-table-column>
            <el-table-column label="首班" align="center" width="60">
              <template slot-scope="{ row }">
                <span>{{ row.mzsb }}</span>
              </template>
            </el-table-column>
            <el-table-column label="末班" align="center" width="60">
              <template slot-scope="{ row }">
                <span>{{ row.mzmb }}</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="计划" align="center">
            <el-table-column label="配车数" align="center" width="60">
              <template slot-scope="{ row }">
                <span>{{ row.jhpcs }}</span>
              </template>
            </el-table-column>
            <el-table-column label="班次" align="center" width="60">
              <template slot-scope="{ row }">
                <span>{{ row.jhbcs }}</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="早高峰" align="center">
            <el-table-column label="时段" align="center" width="100">
              <template slot-scope="{ row }">
                <span>{{ row.jhzgfsd }}</span>
              </template>
            </el-table-column>
            <el-table-column label="班次" align="center" width="60">
              <template slot-scope="{ row }">
                <span>{{ row.jhzgfbc }}</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="晚高峰" align="center">
            <el-table-column label="时段" align="center" width="100">
              <template slot-scope="{ row }">
                <span>{{ row.jhwgfsd }}</span>
              </template>
            </el-table-column>
            <el-table-column label="班次" align="center" width="60">
              <template slot-scope="{ row }">
                <span>{{ row.jhwgfbc }}</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="主线路名称" align="center" width="120">
            <template slot-scope="{ row }">
              <span>{{ row.zxlmc }}</span>
            </template>
          </el-table-column>
          <el-table-column label="上行走向" align="center" width="200">
            <template slot-scope="{ row }">
              <el-tooltip :content="row.xlsxzx" placement="top" effect="light">
                <span>{{ row.xlsxzxPage }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="下行走向" align="center" width="200">
            <template slot-scope="{ row }">
              <el-tooltip :content="row.xlxxzx" placement="top" effect="light">
                <span>{{ row.xlxxzxPage }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-class">
          <pagination v-show="total2 > 0" :total="total2" :page.sync="listQuery2.pageNum" :limit.sync="listQuery2.pageSize" @pagination="getList2" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="车辆信息" name="车辆信息">
        <div class="filter-container">
          <div class="filter-item">
            <el-form label-width="100px">
              <el-form-item label="所属企业："><yhxx v-if="yhxxFormVisible3" ref="yhxxForm3" @change="change3(arguments)" /></el-form-item>
            </el-form>
          </div>
          <div class="filter-item">
            <el-form label-width="100px">
              <el-form-item label="车牌号："><el-input v-model="listQuery3.name" placeholder="请输入车牌号" class="filter-item" clearable style="width: 200px;" /></el-form-item>
            </el-form>
          </div>
          <div class="filter-item">
            <el-button v-waves :loading="listLoading3" class="filter-item" type="primary" size="small" icon="el-icon-search" @click="handleSearch3">查询</el-button>
          </div>
          <div class="filter-item">
            <el-button v-waves :loading="downloadLoading3" class="filter-item" type="primary" size="small" icon="el-icon-download" @click="handleSearch3">导出</el-button>
          </div>
        </div>
        <el-table v-loading="listLoading3" :data="list3" size="mini" fit highlight-current-row style="width: 100%;" max-height="500">
          <el-table-column label="车牌号" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.cph }}</span>
            </template>
          </el-table-column>
          <el-table-column label="所属企业" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.yhjc }}</span>
            </template>
          </el-table-column>
          <el-table-column label="最近运营线路" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.xlmc }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-class">
          <pagination v-show="total3 > 0" :total="total3" :page.sync="listQuery3.pageNum" :limit.sync="listQuery3.pageSize" @pagination="getList3" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getYhxxPage, getYhxxOutput, getGjxlPage, getGjxlOutput, getClxxPage, getClxxOutput } from '@/api/gjxxgl';
import waves from '@/directive/waves';
import Pagination from '@/components/Pagination';
import { formatJson } from '@/utils';
import Yhxx from '@/views/database/yhxx.vue';

export default {
  name: 'Gjxxgl',
  components: { Pagination, Yhxx },
  directives: { waves },
  data() {
    return {
      list1: [],
      list2: [],
      list3: [],
      total1: 0,
      total2: 0,
      total3: 0,
      listLoading1: true,
      listLoading2: true,
      listLoading3: true,
      downloadLoading1: false,
      downloadLoading2: false,
      downloadLoading3: false,
      listQuery1: {
        pageNum: 1,
        pageSize: 10,
        name: ''
      },
      listQuery2: {
        pageNum: 1,
        pageSize: 10,
        yhid: '',
        name: ''
      },
      listQuery3: {
        pageNum: 1,
        pageSize: 10,
        yhid: '',
        name: ''
      },
      activeName: '企业信息',
      yhxxFormVisible2: false,
      yhxxFormVisible3: false
    };
  },
  created() {
    this.getList1();
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name === '线路信息') {
        this.yhxxFormVisible2 = true;
        this.getList2();
      } else if (tab.name === '车辆信息') {
        this.yhxxFormVisible3 = true;
        this.getList3();
      } else {
        this.getList1();
      }
    },
    async getList1() {
      this.listLoading1 = true;
      await getYhxxPage(this.listQuery1).then(response => {
        this.list1 = response.data.list;
        this.total1 = response.data.total;
        this.listLoading1 = false;
      });
    },
    async handleSearch1() {
      this.getList1();
    },
    async getList2() {
      this.listLoading2 = true;
      await getGjxlPage(this.listQuery2).then(response => {
        this.list2 = response.data.list;
        this.total2 = response.data.total;
        this.listLoading2 = false;
      });
    },
    async handleSearch2() {
      this.getList2();
    },
    async getList3() {
      this.listLoading3 = true;
      await getClxxPage(this.listQuery3).then(response => {
        this.list3 = response.data.list;
        this.total3 = response.data.total;
        this.listLoading3 = false;
      });
    },
    async handleSearch3() {
      this.getList3();
    },
    change2(data) {
      this.listQuery2.yhid = data[0];
    },
    change3(data) {
      this.listQuery3.yhid = data[0];
    },
    async handleDownload1() {
      if (this.total1 === 0) {
        this.$message.error('暂无数据');
        return;
      }
      this.downloadLoading1 = true;
      await getYhxxOutput(this.listQuery1).then(response => {
        if (response.data.length === 0) {
          this.$message.error('暂无数据，请重新刷新页面');
          return;
        }
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['企业名称', '企业简称', '法人代表', '联系电话'];
          const filterVal = ['yhmc', 'yhjc', 'frdb', 'lxdh'];
          const data = formatJson(response.data, filterVal);
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: '企业信息'
          });
          this.downloadLoading1 = false;
          this.$message({
            message: '企业信息导出成功',
            type: 'success'
          });
        });
      });
    },
    async handleDownload2() {
      if (this.total2 === 0) {
        this.$message.error('暂无数据');
        return;
      }
      this.downloadLoading2 = true;
      await getGjxlOutput(this.listQuery2).then(response => {
        if (response.data.length === 0) {
          this.$message.error('暂无数据，请重新刷新页面');
          return;
        }
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['线路名称', '所属企业', '管理机构', '线路编码', '营运时间', '调度方式', '首站名称', '首站首班', '首站末班', '末站名称', '末站首班', '末站末班', '计划配车数', '计划班次', '计划班次', '早高峰时段', '早高峰班次', '晚高峰时段', '晚高峰班次', '主线路名称', '上行走向', '下行走向'];
          const filterVal = ['xlmc', 'yhjc', 'qsmc', 'xlbm', 'yysj', 'ddfs', 'szmc', 'szsb', 'szmb', 'mzmc', 'mzsb', 'mzmb', 'jhpcs', 'jhbcs', 'jhzgfsd', 'jhzgfbc', 'jhwgfsd', 'jhwgfbc', 'zxlmc', 'xlsxzx', 'xlxxzx'];
          const data = formatJson(response.data, filterVal);
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: '线路信息'
          });
          this.downloadLoading2 = false;
          this.$message({
            message: '线路信息导出成功',
            type: 'success'
          });
        });
      });
    },
    async handleDownload3() {
      if (this.total3 === 0) {
        this.$message.error('暂无数据');
        return;
      }
      this.downloadLoading3 = true;
      await getClxxOutput(this.listQuery3).then(response => {
        if (response.data.length === 0) {
          this.$message.error('暂无数据，请重新刷新页面');
          return;
        }
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['车牌号', '所属企业', '最近运营线路'];
          const filterVal = ['cph', 'yhjc', 'xlmc'];
          const data = formatJson(response.data, filterVal);
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: '车辆信息'
          });
          this.downloadLoading3 = false;
          this.$message({
            message: '车辆信息导出成功',
            type: 'success'
          });
        });
      });
    }
  }
};
</script>
